<template>
    <scroll-view class="page" :scroll-x="false" :scroll-y="true" :scroll-with-animation="true">
		<view class="bg-user">
			<view class="userinfo">
				<view class="avatar" @tap="toSetting">
					<image :src="userinfo.avatar || '/static/images/avatar.jpg'"></image>
				</view>
				<view class="info" @tap="toSetting">
					<view class="nickname" v-if="!userinfo.nickname && !userinfo.avatar">请登录</view>
					<view class="nickname" v-else>{{userinfo.nickname || '未设置昵称'}}</view>
					<view style="display: flex; align-items: center; margin-top: 10rpx;">
						<view class="mid" style="padding-left: 2rpx;" v-if="userinfo.user_id">MID: {{userinfo.user_id}}</view>
						<view class="phone">
							<image src="/static/images/user/ic_phone.png"></image>
							<text>{{userinfo.phone || '未绑定手机号'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="wallet" @tap="toPay('point')">
				<view class="num">{{ userinfo.balance_point }}</view>
				<view class="label">{{ point_title }}余额</view>
			</view>
		</view>
		<view class="box-vip">
			<view style="display: flex; align-items: center; line-height: 24px;">
				<image class="icon" src="/static/images/ic_vip.png"></image>
				<text>VIP会员</text>
				<view class="line"></view>
				<text v-if="userinfo.vip_expire_time">{{ userinfo.vip_expire_time }} 到期</text>
				<text v-else>高速通道 无限对话</text>
			</view>
			<view @tap="toPay('vip')">
				<button v-if="userinfo.vip_expire_time" class="btn-vip" style="width: 46px;">续费</button>
				<button v-else class="btn-vip">立即开通</button>
			</view>
		</view>
		<!-- <view class="box-vip">
			<view class="vip">
				<view style="display: flex; align-items: flex-start;">
					<image class="icon" src="/static/images/user/ic_vip.png"></image>
					<view style="display: flex; flex-direction: column;">
						<text class="title">VIP会员</text>
						<text class="desc" v-if="userinfo.vip_expire_time">{{userinfo.vip_expire_time}} 到期</text>
						<text class="desc" v-else>高速通道 无限对话</text>
					</view>
				</view>
				<view>
					<button class="btn-vip" @tap="toPay('vip')" v-if="userinfo.vip_expire_time" style="width: 92rpx;">续费</button>
					<button class="btn-vip" @tap="toPay('vip')" v-else>立即开通</button>
				</view>
			</view>
			<view class="wallet">
				<view class="item" @tap="toPay('chat')" :style="'width: ' + (walletItemCount == 2 ? 334 : 216) + 'rpx;'">
					<view>
						<text class="num">{{ userinfo.balance }}</text>
						<text class="unit">条</text>
					</view>
					<view class="label">对话余额</view>
				</view>
				<view v-if="drawIsOpen" class="item" @tap="toPay('draw')" :style="'width: ' + (walletItemCount == 2 ? 334 : 216) + 'rpx;'">
					<view>
						<text class="num">{{ userinfo.balance_draw }}</text>
						<text class="unit">张</text>
					</view>
					<view class="label">绘画余额</view>
				</view>
				<view v-if="hasModel4" class="item" @tap="toPay('model4')" :style="'width: ' + (walletItemCount == 2 ? 334 : 216) + 'rpx;'">
					<view>
						<text class="num">{{ userinfo.balance_gpt4 }}</text>
						<text class="unit">万字</text>
					</view>
					<view class="label">高级版字数</view>
				</view>
			</view>
		</view> -->
        <view class="menus">
            <view class="item" data-url="/pages/user/card" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_card.png"></image>
					<text class="text-grey">{{ '卡密兑换' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/task/index" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_help.png"></image>
					<text class="text-grey">{{ '每日任务' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/commission/index" @tap="linkto" v-if="userinfo.is_commission">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_commission.png"></image>
					<text class="text-grey">{{ '推广中心' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/commission/apply" @tap="linkto" v-if="userinfo.commission_is_open && !userinfo.is_commission">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_commission.png"></image>
					<text class="text-grey">{{ '申请推广员' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/commission/share" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_invite.png"></image>
					<text class="text-grey">{{ '邀请好友' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
        </view>
        <view class="menus" style="margin-bottom: 30rpx;">
            <view class="item" data-url="/pages/article/list?type=help" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_help.png"></image>
					<text class="text-grey">{{ '使用教程' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
			<view class="item" data-url="/pages/price/price" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_price.png"></image>
					<text class="text-grey">{{ '计费说明' | lang }}</text>
				</view>
			    <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
			</view>
            <view class="item" data-url="/pages/user/feedback" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_feedback.png"></image>
					<text class="text-grey">{{ '意见反馈' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/article/article?type=about" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_about.png"></image>
					<text class="text-grey">{{ '关于我们' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
            <view class="item" data-url="/pages/article/article?type=kefu" @tap="linkto">
				<view class="value">
					<image class="icon" src="/static/images/user/ic_kefu.png"></image>
					<text class="text-grey">{{ '联系客服' | lang }}</text>
				</view>
                <image class="arrow" src="/static/images/ic_arrow_r.png"></image>
            </view>
        </view>
		<view style="width: 100%; height: 40rpx;"></view>
    </scroll-view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
			isLogin: false,
			userinfo: {
				user_id: 0,
				balance: 0,
				balance_draw: 0,
				balance_gpt4: 0
			},
			drawIsOpen: false,
			hasModel4: false,
			model4Name: '高级版',
			point_title: '积分'
        };
    },
	onLoad() {
		app.globalData.util.getSetting().then(setting => {
			this.setData({
				drawIsOpen: setting.tabbar[3],
				hasModel4: setting.hasModel4,
				model4Name: setting.model4Name,
                point_title: setting.priceSetting.title || '积分'
			})
		})
	},
    onShow() {
		uni.setNavigationBarTitle({
			title: this.$lang('个人中心')
		})
        this.getUserInfo();
    },
	computed: {
		walletItemCount() {
			let count = 3
			if (!this.drawIsOpen) {
				count--
			}
			if(!this.hasModel4) {
				count--
			}
			return count
		}
	},
    methods: {
        getUserInfo() {
            app.globalData.util
                .request({
                    url: '/user/info'
                })
                .then((res) => {
                    this.setData({
                        userinfo: res.data,
						isLogin: true
                    });
                }).catch(res => {
					if(res.errno == 403) {
						app.globalData.util.toLogin('请登录')
					}
				})
        },

        getUserProfile() {
			window.location.href = app.globalData.siteroot + '/h5/getProfile'
            // uni.getUserProfile({
            //     desc: '使用微信登录'
            // })
            //     .then((e) => {
            //         if (!(e.errMsg.indexOf('fail') > 0)) {
            //             app.globalData.util
            //                 .request({
            //                     url: '/user/setUserAvatar',
            //                     data: {
            //                         encryptedData: e.encryptedData,
            //                         iv: e.iv
            //                     }
            //                 })
            //                 .then((res) => {
            //                     this.getUserInfo();
            //                 });
            //         } else {
            //             app.globalData.util.message('授权失败', 'error');
            //         }
            //     })
            //     .catch(() => {});
        },

        getUserPhone(e) {
            if (e.detail.errMsg != 'getPhoneNumber:ok') {
                var message = e.detail.errMsg;
                if (message.indexOf('user deny') !== -1) {
                    message = '已取消授权';
                }
                app.globalData.util.message(message, 'error');
                return;
            }
            app.globalData.util
                .request({
                    url: '/user/setUserPhone',
                    data: {
                        encryptedData: e.detail.encryptedData,
                        iv: e.detail.iv
                    }
                })
                .then((res) => {
                    this.getUserInfo();
                });
        },

        linkto(e) {
			if (!this.isLogin) {
				app.globalData.util.toLogin('请登录')
				return
			}
            const url = e.currentTarget.dataset.url;
            uni.navigateTo({
                url: url
            });
        },

        toPay(type) {
			if (!this.isLogin) {
				app.globalData.util.toLogin('请登录')
				return
			}
			app.globalData.util.toPay(type)
        },

        toTask() {
			if (!this.isLogin) {
				app.globalData.util.toLogin('请登录')
				return
			}
            uni.navigateTo({
                url: '/pages/task/index'
            });
        },

        toSetting() {
			if (!this.isLogin) {
				app.globalData.util.toLogin('请登录')
				return
			}
            uni.navigateTo({
                url: '/pages/user/setting/index'
            });
        }
    }
};
</script>
<style>
.page {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.bg-user {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    height: 220rpx;
    z-index: 1;
}

.userinfo {
    display: flex;
    align-items: center;
    padding: 60rpx 0 0 60rpx;
}

.userinfo .avatar {
    width: 108rpx;
    height: 108rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #f8f8f8;
}

.userinfo .avatar image {
    width: 100%;
    height: 100%;
}

.userinfo .info {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
}

.userinfo .info .nickname {
    font-size: 34rpx;
    line-height: 48rpx;
    font-weight: bold;
    color: #1b1c1c;
	max-width: 330rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.userinfo .info .mid {
    font-size: 24rpx;
    color: #1b1c1c;
    line-height: 36rpx;
    margin-right: 10rpx;
}

.userinfo .info .phone {
    color: #1b1c1c;
    background-color: #8fded8;
    padding: 0 16rpx;
    height: 36rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
}

.userinfo .info .phone image {
    width: 20rpx;
    height: 20rpx;
}

.userinfo .info .phone text {
    font-size: 20rpx;
}

.bg-user .wallet {
    position: absolute;
    width: 200rpx;
    height: 100rpx;
    right: 0;
    top: 60rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.bg-user .wallet .num {
    font-size: 32rpx;
    font-weight: bold;
    color: #04BABE;
    line-height: 44rpx;
}
.bg-user .wallet .label {
    font-size: 26rpx;
    color: #666;
}

.bg-user .btn-setting {
    position: absolute;
    right: 40rpx;
    top: 76rpx;
    width: 48rpx;
    height: 48rpx;
    padding: 16rpx;
    border-radius: 12rpx;
}

.bg-user .btn-setting image {
    width: 100%;
    height: 100%;
}

.bg-user .btn-setting:active {
    background: rgba(0, 0, 0, 0.2);
}


.nologin {
    display: flex;
    align-items: center;
    padding: 20rpx 0 60rpx 30rpx;
}

.nologin .avatar {
    width: 92rpx;
    height: 92rpx;
}

.nologin .avatar image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.nologin .info {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    align-items: center;
}

.nologin .info .nickname {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
}

.box-vip {
    width: 690rpx;
    height: 88rpx;
    margin: 0 auto 30rpx auto;
    border: none;
    position: relative;
    background: linear-gradient(30deg, #f7debe, #f4c384);
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #9a5b12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.box-vip .icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
}

.box-vip .line {
    margin: 0 20rpx;
    vertical-align: middle;
    display: inline-block;
    width: 2rpx;
    height: 24rpx;
    background: rgba(154, 91, 18, 0.4);
}

.box-vip .btn-vip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 48rpx;
    background: #ffe8b5;
    border-radius: 24rpx;
    font-size: 24rpx;
    padding: 0;
    border: none;
    color: #9a5b12;
    cursor: pointer;
}

.menus {
    border-radius: 20rpx;
    padding: 20rpx 0;
	margin: 0 30rpx 30rpx 30rpx;
	background: linear-gradient(to bottom, #edfaf9, #fbffff);
	background: #faffff;
}

.menus .item {
    width: 100%;
	padding: 24rpx 40rpx 24rpx 45rpx;
	border-bottom: 1px solid #f3f9f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 32rpx;
	color: #1b1c1c;
	box-sizing: border-box;
}

.menus .item .icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
}

.menus .item .value {
    font-size: 30rpx;
    color: #1b1c1c;
    display: flex;
    align-items: center;
}

.menus .item .arrow {
    width: 24rpx;
    height: 24rpx;
    opacity: 0.8;
}

.menus .item.button {
    background: #fff;
    border: none;
    outline: none;
    margin: 0;
    font-size: 32rpx;
    color: #444;
    line-height: 1em;
}

.menus .item.button::after {
    display: none;
}

.menus .item:active {
    background: #f0f6f6;
}

.menus .item:last-child {
    border-bottom: 0;
}

.text-grey {
    color: #666;
}

.version {
    line-height: 72rpx;
    text-align: center;
    color: #999;
    padding: 30rpx 0;
    font-size: 24rpx;
    letter-spacing: 2rpx;
}
</style>
